<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>宠物</title>
        <style>
            *{
                margin:0px;
                padding: 0px;
                list-style: none;
            }
            table{
                border-collapse: collapse;
                margin:10px auto;
            }
            td{
                border:1px solid #ccc;
                width: 150px;
                text-align: center;
                line-height: 40px;
            }
            .one{
                background-color: skyblue;
                font-weight: bold;
                font-size: 20px;
                color:#fff;
            }
            body{
                text-align: center;
            }
            button{
                background:gold;
                border:none;
                color: black;
                width:200px;
                line-height: 40px;
                outline: none;
                cursor: pointer;
                margin-top: 20px;
            }
            input{
                margin-top: 10px;
                width: 200px;
                line-height: 30px;
                height: 40px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入宠物类型"  id="ww"><br>
        <input type="text" placeholder="请输入宠物品种" id="dd"><br>
        <button id="ii">新增商品</button><br>
        <table id="box">
            <tr class="one">
                <td>宠物种类</td>
                <td>宠物品种</td>
                <td>交配情况</td>
                <td>编辑</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>狗</td>
                <td>哈士奇</td>
                <td>未交配</td>
                <td>编辑</td>
                <td onclick="del(this)" style="cursor: pointer;">删除</td>
            </tr>
        </table>
        <script>
            ii.onclick=function(){
                var w=ww.value;
                var d=dd.value;
                var tag=document.createElement('tr');
                tag.innerHTML=`<td>${w}</td>
                <td>${d}</td>
                <td>未交配</td>
                <td>编辑</td>
                <td onclick="del(this)"style="cursor: pointer;">删除</td>`
                box.appendChild(tag)

            }
            function del(a){
                a.parentNode.parentNode.removeChild(a.parentNode)
            }

                    
        </script>
    </body>
</html>